<template>
    <a-modal :title="title" v-model:visible="open" width="680px" append-to-body>
        <a-form ref="menuRef" :model="form" :rules="rules">
            <a-row>
                <a-col :span="24">
                    <a-form-item field="parentId" label="上级菜单">
                        <a-tree-select v-model="form.parentId" :data="menuOptions"
                            :field-names="{ title: 'menuName', key: 'menuId', children: 'children' }">
                        </a-tree-select>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item field="menuType" label="菜单类型">
                        <a-radio-group v-model="form.menuType">
                            <a-radio value="M">目录</a-radio>
                            <a-radio value="C">菜单</a-radio>
                            <a-radio value="F">按钮</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item field="menuName" label="菜单名称">
                        <a-input v-model="form.menuName" placeholder="请输入菜单名称" />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item field="orderNum" label="显示排序">
                        <a-input-number v-model="form.orderNum" placeholder="请输入显示排序" style="width: 100%" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script setup name="MenuForm">
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import { nextTick } from "vue";

const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");

const menuList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const menuOptions = ref([]);
const isExpandAll = ref(false);
const refreshTable = ref(true);
const iconSelectRef = ref(null);

const data = reactive({
    form: {},
    queryParams: {
        menuName: undefined,
        visible: undefined
    },
    rules: {
        menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
        orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
    },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询菜单列表 */
function getList() {
    loading.value = true;
    listMenu(queryParams.value).then(response => {
        menuList.value = proxy.handleTree(response.data, "menuId");
        loading.value = false;
    });
}
/** 查询菜单下拉树结构 */
function getTreeselect() {
    menuOptions.value = [];
    listMenu().then(({ data }) => {
        const menu = { menuId: 0, menuName: "主类目", children: [] };
        menu.children = proxy.handleTree(data, "menuId");
        nextTick(() => {
            menuOptions.value.push(menu);
        })
    });
}
/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}
/** 表单重置 */
function reset() {
    form.value = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0"
    };
    proxy.resetForm("menuRef");
}
/** 展示下拉图标 */
function showSelectIcon() {
    iconSelectRef.value.reset();
}
/** 选择图标 */
function selected(name) {
    form.value.icon = name;
}
/** 搜索按钮操作 */
function handleQuery() {
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}
function init(method, menuId) {
    reset();
    getTreeselect();
    open.value = true;
    if (method == 'add') {
        if (menuId) {
            form.value.parentId = menuId;
        } else {
            form.value.parentId = 0;
        }
        title.value = "添加菜单";
    }
}
/** 新增按钮操作 */
function handleAdd(row) {

}
/** 展开/折叠操作 */
function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
        refreshTable.value = true;
    });
}
/** 修改按钮操作 */
async function handleUpdate(row) {
    reset();
    await getTreeselect();
    getMenu(row.menuId).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改菜单";
    });
}
/** 提交按钮 */
function submitForm() {
    proxy.$refs["menuRef"].validate(valid => {
        if (valid) {
            if (form.value.menuId != undefined) {
                updateMenu(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addMenu(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}
/** 删除按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function () {
        return delMenu(row.menuId);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
defineExpose({
    init
})
</script>